<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            color: black;
            background: rgb(241, 213, 50);
            font-family: sans-serif;
        }
        body {
            margin: 0;
            padding: 0;
        }
        .code {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }
        h1 {
            text-shadow: 10px 10px 0 rgba(0, 0, 0, 0.4);
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div class="code">
        <h1>Coding</h1>
    </div>

    <script>
        const code = document.querySelector('.code')
        const text = document.querySelector('h1')
        const r = 100
        function shandow(e) {
            const { offsetWidth: width, offsetHeight: height } = code;
            let { offsetX: x, offsetY: y } = e
            if( this !== e.target ) {
                x = x + e.target.offsetLeft
                y = y + e.target.offsetTop
            }
            const xR = Math.round((x/width)*r - r / 2 )
            const yR = Math.round((y/height)*r - r / 2 )

            text.style.textShadow = `
            ${xR}px ${yR}px 5px rgba(0,0,0,0.4)
            `
        }

        code.addEventListener('mousemove',shandow)
    </script>
</body>
</html>